<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/yangshi.css" />
    <link rel="stylesheet" href="../css/shouxushi.css" />
    <style>
      .shang-con {
        width: 100%;
      }
      .shang {
        width: 1200px;
        margin: 0 auto;
      }
      #a {
        width: 200px;
        height: 300px;
        padding-top: 10px;
        float: left;
        border: 1px solid black;
        text-align: center;
      }
      #b {
        width: 50px;
        float: left;
        margin: 50px 50px;
      }
      .add-btn {
        width: 200px;
        height: 40px;
        background: red;
        color: #fff;
        border-style: none;
      }
      .h2 {
        clear: both;
      }
      #ull > img {
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <!-- 导航栏 -->
    <div class="dingbu">
      <div class="dingbu-com">
        <div class="dizhi">地址</div>
        <ul class="nav">
          <a href="../html/denglu.html">
            <li>
              你好，请登录
              <i style="color: red">免费注册</i>
            </li>
          </a>

          <li>|</li>
          <a href="#">
            <li>我的订单</li>
          </a>

          <li>|</li>
          <a href="">
            <li>我的京东</li>
          </a>

          <li>|</li>
          <a href="">
            <li>京东会员</li>
          </a>

          <li>|</li>
          <a href="">
            <li style="color: red">企业采购</li>
          </a>

          <li>|</li>
          <a href="">
            <li>客户服务</li>
          </a>

          <li>|</li>
          <a href="">
            <li>网站导航</li>
          </a>

          <li>|</li>
          <a href="">
            <li>手机京东</li>
          </a>
        </ul>
      </div>
    </div>

    <!-- 头部 -->
    <div class="header-com">
      <div class="header">
        <a href="../html/shouye.html">
          <img class="logo" src="../img/1.png" alt="" />
        </a>

        <div class="header-da">
          <div class="header-a">
            <input type="text" class="input1" placeholder="跨店每满200-20" />
            <button class="button1">搜索</button>
          </div>
        </div>
        <button class="button2">我的购物车</button>
        <ul class="ul1">
          <a href=""><li>美妆七夕</li></a>

          <a href=""><li>手机好店</li></a>

          <a href=""><li>自营电脑</li></a>

          <a href=""><li>家具品类</li></a>

          <a href=""><li>防疫杀菌</li></a>

          <a href=""><li>七夕好礼</li></a>

          <a href=""><li>服饰七夕</li></a>

          <a href=""> <li>浪漫七夕</li></a>
        </ul>
      </div>
    </div>

    <!-- 商品 -->
    <div class="shang-con">
      <div class="shang">
        <h2 style="font-size: 20px">每日特价</h2>

        <ul id="ull">
          <img src="../img/t1.jpg" alt="" />
          <img src="../img/t2.jpg" alt="" />
          <img src="../img/t3.jpg" alt="" />
          <img src="../img/t4.jpg" alt="" />
        </ul>

        <h2 class="h2">商品</h2>
        <ul id="cart-list"></ul>
      </div>
    </div>
  </body>
  <script>
    let arr = [
      {
        imgsrc: "../img/t1.jpg",
        name: "真我Q2i 5000mAh",
        price: "958元",
      },
      {
        imgsrc: "../img/t2.jpg",
        name: "侧吸式 油烟机",
        price: "2299元",
      },
      {
        imgsrc: "../img/t3.jpg",
        name: "联想笔记本电脑",
        price: "9499元",
      },
      {
        imgsrc: "../img/t4.jpg",
        name: "德利铜线",
        price: "147元",
      },
    ];

    let html = "";
    arr.forEach((obj) => {
      html += `
           <li id="a">
             <img src="${obj.imgsrc}" />
             <h3>${obj.name}</h3>
             <p>${obj.price}</p>
             <button class="add-btn">加入购物车</button>
         </li>
           `;
    });
    let a = document.querySelector("#a");
    let ul = document.querySelector("#ull");
    ul.innerHTML = html;
    let addBtns = document.querySelectorAll(".add-btn");

    addBtns.forEach((btn, i) => {
      btn.onclick = () => {
        let obj = arr[i];
        let plistStr = localStorage.getItem("plist");
        if (plistStr == null) {
          let cartArr = [obj];
          localStorage.setItem("plist", JSON.stringify(cartArr));
        } else {
          let cartArr = JSON.parse(plistStr);
          cartArr.push(obj);
          localStorage.setItem("plist", JSON.stringify(cartArr));
        }
        loadCartList();
      };
    });
    loadCartList();
    //购物车列表
    function loadCartList() {
      let cartUl = document.querySelector("#cart-list");
      let jsonStr = localStorage.getItem("plist");
      if (jsonStr == null) {
        cartUl.innerHTML = "购物车中没有数据";
      } else {
        let cartArr = JSON.parse(jsonStr);
        let html = "";
        cartArr.forEach(function (obj) {
          html += `
               <li id="b">
                  <img src="${obj.imgsrc}" />
                    <span>${obj.name}</span>
                  <span>${obj.price}</span>
                    <button class="del-btn">✖</button>
                </li>
             `;
        });
        cartUl.innerHTML = html;
        let delBtns = document.querySelectorAll(".del-btn");
        delBtns.forEach((btn, i) => {
          btn.onclick = () => {
            cartArr.splice(i, 1);
            localStorage.setItem("plist", JSON.stringify(cartArr));
            loadCartList();
          };
        });
      }
    }
  </script>
</html>
